<template>
  <el-row class="lg-bg" justify="center" type="flex">
    <el-card class="lg-container">
      <el-col :span="14">
        <div class="lg-cont-bg"></div>
      </el-col>
      <el-col :span="10">
        <section class="lg-wrap">
          <div class="lg-logo"></div>
          <p class="lg-title">
            欢迎登录内部资金管理系统 <br />
            请输入您的登录权限，如遇到问题请与管理员联系
          </p>
          <el-form
            :model="loginForm"
            :rules="ruleForm"
            class="demo-ruleForm"
            ref="loginForm"
          >
            <el-form-item>
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="submitForm('loginForm')"
                class="lg-btn"
                type="primary"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </section>
      </el-col>
    </el-card>
  </el-row>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { LoginInterface } from "@/interface/interface";
import Cookie from "js-cookie";
import { Message } from "element-ui";
import { login } from "@/api/api";

@Component({})
export default class Login extends Vue {
  protected name!: "Login";
  protected loginForm: LoginInterface = {
    username: "",
    password: ""
  };
  protected ruleForm = {
    username: [
      {
        required: true,
        message: "请输入用户",
        trigger: "blur"
      }
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur"
      }
    ]
  };

  protected submitForm(name: any) {
    (this.$refs[name] as any).validate(async (volid: any) => {
      if (volid) {
        const { username, password } = this.loginForm as any;
        const res = await login({ username, password });
        if (res) {
          const { success, message, object } = res;
          if (success) {
            const saveToken = (token: string) => {
              Cookie.set("access-token", token);
            };
            const saveUsername = (username: string) => {
              Cookie.set("username", username);
            };
            const accessToken = object["access-token"];
            saveToken(accessToken);
            saveUsername(username);
            this.$router.push({ name: "Home" });
            const nameRouter = this.$route.query.redirect as any;
            if (nameRouter) {
              this.$router.push({ name: nameRouter });
            }
          } else {
            this.$message({
              message: message,
              type: "error"
            });
          }
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.lg-bg {
  width: 100%;
  height: 100vh;
  background: url("../assets/img/login/logo-bk.jpg") no-repeat center center;
  background-size: cover;

  .lg-container {
    width: 1147px;
    height: 527px;
    margin: 53px auto 20px;
  }

  .lg-wrap {
    width: 335px;
    margin: 64px auto;
  }

  .lg-cont-bg {
    width: 100%;
    height: 0;
    padding-top: 80%;
    background: url("../assets/img/login/login-bg.jpg") no-repeat center center;
    background-size: cover;
  }

  .lg-logo {
    width: 206px;
    height: 47px;
    background: url("../assets/img/login/logo.png") no-repeat center center;
    background-size: cover;
    margin-left: 129px;
  }

  .lg-title {
    text-align: right;
    font: 13px/21px "Microsoft YaHei";
    color: #434343;
    padding-top: 20px;
    margin-bottom: 67px;
  }

  .lg-btn {
    width: 100%;
    margin-left: 0px;
    text-align: center;
  }
}

/deep/ .el-card__body {
  padding: 0;
}
</style>
